<template>
	<!-- 荆竹概况 -->
	<div class="header">
		<div class="desc">
			<p>
				荆竹村位于重庆市武隆区仙女山街道，紧邻世界自然遗产地—天生三桥，距离仙女山国家5A级旅游景区、仙女山国家级旅游度假区约5公里，是全国首批“乡村旅游重点村”，2022年入选联合国世界旅游组织“最佳旅游乡村”。“归原·艺术农业旅游项目”位于荆竹村水竹坪社，涵盖野奢度假酒店、精品民宿客栈、天坑自然地理奇观、文创艺术体验、亲子农场体验等五大板块，打造集野奢酒店、创客民宿、艺术文创、农业体验于一体的乡村旅游目的地，实现都市人诗意田园、躬耕南阳的“归原”之梦。
			</p>
		</div>
	</div>
	<!-- 美景视频 -->
	<div class="container-box">
		<div class="bg-box">
			<div class="container-title">荆竹美景</div>
			<div class="container-body">
				<el-carousel indicator-position="outside" arrow="never" :autoplay="false">
					<el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in videoList" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item>

					<el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in videoList1" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item>

					<!-- <el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in videoList2" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item> -->
				</el-carousel>
			</div>

			<!-- 武隆景点 -->
			<div class="container-title">武隆景点</div>
			<div class="container-body">
				<el-carousel indicator-position="outside" arrow="never" :autoplay="false">
					<el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in aroundList" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item>

					<el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in aroundList1" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item>

					<!-- <el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in aroundList2" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item> -->

					<!-- <el-carousel-item>
						<div class="video-box">
							<div class="list">
								<div class="list-item" v-for="(item, index) in aroundList3" :key="index">
									<div class="video-box" @click="playVideo(item)">
										<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
										<IEpVideoPlay color="#fff" />
									</div>
									<div class="text">{{ item.label }}</div>
								</div>
							</div>
						</div>
					</el-carousel-item> -->
				</el-carousel>
			</div>
			<!-- 播放器 -->
			<PreviewVideo ref="PVVideoRef" :video="preVideo" />
		</div>
	</div>
	<!-- 美景图片 -->
	<div class="container-box-pic">
		<div class="pic-box">
			<div class="container-title">美景图片</div>
			<div class="pic-body">
				<div class="pic-body-item" v-for="(i, index) in picList" :key="index">
					<el-image :src="i.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="GaiKuang">
import { useBaseStore } from "@/store/base";
import PreviewVideo from "@/components/PreviewVideo/index.vue";
import { PVideo } from "@/components/interface";
const { cosPrefix } = useBaseStore();

// 视频
// 荆竹美景
const videoList = [
	{ label: "归原小镇", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/1.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/1.mp4" },
	{ label: "云上荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/2.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/2.mp4" },
	{ label: "荆竹雪景", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/3.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/3.mp4" },
	{ label: "高山草旬", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/12.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/12.mp4" },
	{ label: "露营基地", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/5.mp4" }
] as any[];
const videoList1 = [
	{ label: "露营基地", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.mp4" },
	{ label: "归原美景", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/7.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/7.mp4" },
	{ label: "荆竹历程", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/8.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/8.mp4" },
	{ label: "归原茶馆", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" },
	{ label: "乡野写生", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/10.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/10.mp4" }
] as any[];
// const videoList2 = [
// 	{ label: "归原乡宿", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" },
// 	{ label: "亲子乐园", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" },
// 	{ label: "俯瞰荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" },
// 	{ label: "归原茶馆1", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" },
// 	{ label: "自驾体验", img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/9.mp4" }
// ] as EnumProps[];

// 周边景点
const aroundList = [
	{ label: "武隆旅游", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.mp4" },
	{ label: "懒坝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/2.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/2.mp4" },
	{ label: "天生三桥", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.mp4" },
	{ label: "龙水峡地缝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/4.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/4.mp4" },
	{ label: "白马山", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.mp4" }
] as any[];

const aroundList1 = [
	{ label: "树顶漫步", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/6.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/6.mp4" },
	{ label: "仙女山度假区", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/7.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/7.mp4" },
	{ label: "仙女山度假区", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/8.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/8.mp4" },
	{
		label: "亭雪-仙女山旅游度假区",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/9.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/9.mp4"
	},
	{ label: "白马山", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.mp4" }
] as any[];

// const aroundList2 = [
// 	{ label: "武隆旅游", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.mp4" },
// 	{ label: "懒坝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/2.mp4" },
// 	{ label: "天生三桥", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.mp4" },
// 	{ label: "龙水峡地缝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/4.mp4" },
// 	{ label: "白马山", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.mp4" }
// ] as EnumProps[];

// const aroundList3 = [
// 	{ label: "武隆旅游", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.mp4" },
// 	{ label: "懒坝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/2.mp4" },
// 	{ label: "天生三桥", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.mp4" },
// 	{ label: "龙水峡地缝", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/4.mp4" },
// 	{ label: "白马山", img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.png", video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/5.mp4" }
// ] as EnumProps[];
// 播放视频
const preVideo = ref<PVideo>({ title: "", src: "" });
const PVVideoRef = ref<InstanceType<typeof PreviewVideo>>();
const playVideo = (item: any) => {
	preVideo.value = { title: item.title, src: item.video };
	PVVideoRef.value.play();
};
// 照片three-level/xiangye/xiangyefeng/meijingtupian/1.jpg
const picList = [
	{ label: "归原夜景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/1.jpg" },
	{ label: "云上荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/2.png" },
	{ label: "荆竹雪景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/3.jpg" },
	{ label: "高山草甸", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/4.jpg" },
	{ label: "露营基地", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/5.jpg" },
	{ label: "归原夜景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/6.jpg" },
	{ label: "云上荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/7.jpg" },
	{ label: "荆竹雪景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/8.png" },
	{ label: "归原夜景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/9.jpg" },
	{ label: "云上荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/10.png" },
	{ label: "荆竹雪景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/11.jpg" },
	{ label: "高山草甸", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/12.png" },
	{ label: "露营基地", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/13.png" },
	{ label: "归原夜景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/14.jpg" },
	{ label: "云上荆竹", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/15.jpg" },
	{ label: "荆竹雪景", img: cosPrefix + "three-level/xiangye/xiangyefeng/meijingtupian/16.jpg" }
] as any[];
</script>
<style lang="scss" scoped>
.header {
	position: relative;
	.desc {
		position: absolute;
		top: -360px;
		padding: 0 320px;
		font-family: SourceHanSerif-light;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		color: #ffffff;
		text-indent: 32px;
	}
}
.container-box {
	.bg-box {
		padding: 40px 320px;
		background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/three-level/xiangye/xiangyefeng/jingzhumeijing/bg.jpg?imageMogr2/thumbnail/1920x");
		background-repeat: no-repeat;
		background-size: cover;
		.container-title {
			margin-bottom: 40px;
			font-size: 28px;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
		}
		.container-body {
			:deep(.el-carousel__container) {
				height: 180px;
			}
			:deep(.el-carousel__indicators) {
				display: flex;
				justify-content: center;
				width: 100%;
			}
			:deep(.el-carousel__indicators--horizontal) {
				.el-carousel__indicator--horizontal button {
					width: 15px;
					height: 15px;
					background: #ffffff;
					border-radius: 50%;
					opacity: 0.5;
				}
				.el-carousel__indicator--horizontal.is-active button {
					background: #ffffff;
					border-radius: 50%;
					opacity: 1;
				}
			}
			.video-box {
				.list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.list-item {
						display: flex;
						flex-direction: column;
						margin-bottom: 40px;
						.el-image {
							width: 240px;
							height: 140px;
							border-radius: 10px;
						}
						.text {
							padding: 10px 0;
							font-size: 20px;
							color: #ffffff;
							text-align: center;
						}
					}
				}
			}
		}
	}
}
.container-box-pic {
	.pic-box {
		padding: 34px 314px 80px;
		background-color: #385b65;
		.container-title {
			margin-bottom: 40px;
			font-size: 28px;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
		}
		.pic-body {
			display: flex;
			flex-wrap: wrap;
			.pic-body-item {
				display: flex;
				flex-wrap: wrap;
				.el-image {
					width: 318px;
					height: 232px;
					margin: 0 2px 2px 0;
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.header {
		.desc {
			padding: 16px;
			padding-top: 78px;
			font-size: 10px;
		}
	}
	.container-box {
		.bg-box {
			padding: 16px;
		}
	}
	.container-box-pic {
		.pic-box {
			padding: 16px;
			.pic-body-item {
				width: 47.5% !important;
				margin-right: 5%;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.el-image {
					width: 100% !important;
				}
			}
		}
	}
}
</style>
